import { useEcharts } from "@/hooks/useEcharts";
import * as echarts from "echarts";

const Comp = (props: any) => {
	const { data } = props;

	console.log(data, 'datadata')

	let option: echarts.EChartsOption = {
		color: [
			"#5470c6",
			"#91cc75",
			"#fac858",
			"#ee6666",
			"#73c0de",
			"#3ba272",
			"#fc8452",
			"#9a60b4",
			"#ea7ccc",
			"#7b68ee",
			"#87cefa",
			"#f0e68c",
			"#ffb6c1",
			"#98fb98",
			"#afeeee",
			"#ffa07a",
			"#dda0dd",
		],
		tooltip: {
			trigger: 'item'
		},
		legend: {
			orient: "vertical",
			type: "scroll",
			align: "right",
			x: "right",
			y: 80,
		},
		series: [{
			type: 'pie',
			radius: ['40%', '70%'],
            center: ["35%", "54%"],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 0,
				borderColor: '#fff',
				borderWidth: 2
			},
			label: {
				show: false,
				position: 'center',
              	formatter: "{b}\n ({c})单",
			},
			emphasis: {
				label: {
					show: true,
					fontSize: 30,
					fontWeight: 'bold'
				}
			},
			labelLine: {
				show: false
			},
			data: (data || []).map((item: any) => ({ ...item, value: item.count }))
		}],
	};

	const [echartsRef] = useEcharts(option);
	return <div ref={echartsRef} style={{ height: '380px', padding: '0 12px' }} />;
};

export default Comp;
